<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<title>公告发布管理</title>
<%@include file="/WEB-INF/base.jspf"%>
<style>
	.div-c-controlBtns {
		display:flex;
		justify-content:flex-end;
		margin-bottom:16px;
	}
		.modal-dialog {
		max-width: 1000px;
	}
	.div-c-controlBtns button + button {
		margin-left:8px;
	}
	.p-c-flexwrapper {
		display:flex;
		align-items:center;
		margin-right:16px;
		margin-bottom:16px;
		width:100%;
	}
	.p-c-flexwrapper > span {
		width: 80px;
	}
	.p-c-flexwrapper > .form-control {
		width:auto;
		flex-grow:1;
	}
	#addAndEditModal .modal-body {
		display:flex;
		flex-wrap:wrap;
	}
	.bootstrap-background {
	    color: #fff;
	    display: inline-block;
	    text-align: center;
	    white-space: nowrap;
	    vertical-align: middle;
	    border: 1px solid transparent;
	    padding: 5px 10px;
	    line-height: 1.5;
	    border-radius: 3px;
	    font-size: 12px;
	    cursor: default;	
	}
	.bootstrap-background.info {
		 background-color: #5bc0de;
   		 border-color: #46b8da;
	}
	.bootstrap-background.success {
		background-color: #5cb85c;
	    border-color: #4cae4c;
	}
	.bootstrap-background.all {
		background-color: rgb(65,139,202);
	    border-color: rgb(65,139,202);
	}	
	.img-c-smallPic {
		max-width:60px;
		max-height:60px;
		cursor: pointer;
	}		
	.pic-noticeText {
		display:none;
		margin: 0 16px;
	}
	.pic-noticeText.active {
		display:block;
	}
#editor {
		width:100%;
	}
	.table>tbody>tr>td {
	vertical-align:middle;	
}
.dataTables_wrapper table td, .dataTables_wrapper table th {
	white-space: nowrap;
}
.dataTables_wrapper, .dataTables_wrapper table {
	overflow-x:auto;
	max-width:100%;
}
.dataTables_wrapper table {
	border-collapse: collapse!important;
}
table.dataTable thead th {
	border-bottom-color: #ddd!important;
}
*{margin: 0;padding: 0;font-size: 16px; }
.hidden-td {
	display:none;
}
.w-e-icon-upload2 {
	font-size:60px!important;
}
td.noticeName-edit-td {
	cursor: pointer;
	text-decoration: underline;
}
.hasmaxwidth-td {
  max-width:100px;
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow: hidden;
  cursor: pointer;
  max-height:50px;
}	

</style>
</head>
<body>
	<div class="div-c-controlBtns" style="display:flex;justify-content:flex-start;">
		<button class="btn btn-primary" id="button-i-addNewZongDaiLi">新增</button>
	</div>
<table id="table-i-cunkuanList" class="table table-striped table-bordered table-hover">
		<thead>
			<tr>
				<th style="display:none;"></th>
				<th>公告名称</th>
				<th>公告类型</th>
				<th>公告状态</th>
				<th>发布时间</th>
				<th>发布人</th>
				<th>操作</th>
				<th style="display:none;"></th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>		
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="addAndEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog" style="width:700px;">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		            </div>
		            <form  action="" method="post">
			            <div class="modal-body">
			            	<input id="input-i-id" name="id" hidden="hidden" class="input-auto" />
			            	<p class="p-c-flexwrapper"><span>标题：</span><input name="noticeName" id="input-i-noticeName" required class="input-auto form-control" /></p>
			            	<p class="p-c-flexwrapper"><span>公告类型：</span>
				            	<select name="noticeType" id="select-i-noticeType" required class="input-auto form-control">
				            		<option value="首页公告">首页公告</option>
				            		<option value="提醒用户绑定银行卡公告">提醒用户绑定银行卡公告</option>
				            	</select>
			            	</p>
			            	<div id="editor"></div>
			            </div>
			            <input hidden="hidden" name="noticePicture" id="input-i-noticeContent">
		            </form>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-primary" id="button-i-submitZongDaiLi">提交</button>
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->
<div class="modal fade" id="noticeModal" tabindex="-1" role="dialog" aria-labelledby="noticeModal" aria-hidden="true">
    <div class="modal-dialog class-fake-alert">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body" ></div>
            <div class="modal-footer">	      
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>  

<!-- 模态框（Modal） -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">你确定要删除当前公告吗？</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="btn-i-delModalBtn">删除</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>	
 			
 	<script type="text/javascript" src="/js/wangEditor.min.js"></script>		
	<script type="text/javascript" src="/js/zhengzeTools.js"></script>
	<script>
	initEditor("#editor")
	bindDelItemEvent("#table-i-cunkuanList", ".btn-c-delZongDaiLiInfo", "/infoNotice/delInfoNotice.do")
	$("#table-i-cunkuanList").DataTable({
	      // "bPaginate": true,
	      "bLengthChange": true,      
	      "bSort": false,
	      // "bInfo": true,
	      "bAutoWidth": false,
//		         "bServerSide":true,
	      'aLengthMenu':[5, 20],
	       "searching": false,
	       "dom": `ftp`,
//		    "searching": true,l
	       "language": {//语言设置  
	            "lengthMenu": "每页显示 _MENU_ 条记录",     
	            "zeroRecords": "没有检索到数据",     
	            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
	            "info": "没有数据",     
	            "oPaginate": {     
	                "sFirst": "首页",     
	                "sPrevious": "前一页",     
	                "sNext": "后一页",     
	                "sLast": "尾页"    
	          	},
	            "search":"搜索:",
	            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
	            "infoEmpty":      "没有找到匹配的信息",
	         },
	         "drawCallback": function( settings ) {
	        	 $(".input-c-mySwitch").bootstrapSwitch()
	         },
	         "ajax": {
	        	 "type": "POST",
	        	 "url":"/infoNotice/findInfoNotice.do",
 	        	 "dataSrc": function(json) {
	        		 var newJson = json.data
	        		 for (var i = 0; i < newJson.length; i++) {
	         			 var item = newJson[i]
	         			 var stateValue = ""
	        			 if (item.noticeState == "1") {
	        				 stateValue = "checked"
	        			 } else {
	        				 stateValue = ""
	        			 }
	        		 	item.noticeState = "<input class='input-c-mySwitch' data-size='small' type='checkbox' " + stateValue + " data-on-text='启用' data-on-color='success' data-off-color='danger' data-off-text='禁用' />"
	        		 	item.noitcePicture = "<a href='/d/cp/" + item.noticePicture + "' target='_blank'><img src='/d/cp/" + item.noticePicture + "' class='img-c-smallPic' /></a>"
	        		 }
	        		 return newJson
	        	 }, 
	         },
 	         "columns": [
						 {"data": "id", "className": "hidden-td id-edit-td"},
	                     {"data": "noticeName", "className": "noticeName-edit-td" },
	                     {"data": "noticeType", "className": "noticeType-edit-td"},
	                     {"data": "noticeState", "className": "noticeState-edit-td" },
	                     {"data": "createTime", "className": "startDate-edit-td" },
	                     {"data": "updateName", "className": "maxMoney-edit-td" },
	                     {"data": null, "defaultContent": "<button class='btn btn-warning btn-c-editZongDaiLiInfo btn-sm'>修改</button><button style='margin-left:16px;' class='btn btn-danger btn-c-delZongDaiLiInfo btn-sm'>删除</button>"},
	                     {"data": "noticePicture", "className": "noticePicture-edit-td hidden-td" },
	                 ]       
	   		 })	
		$("#button-i-addNewZongDaiLi").on("click", function(event) {
			$("#addAndEditModal").attr("data-type", "add")
			$("#addAndEditModal").modal("show")
		})
		bindJinYongQiYongSwitch("#table-i-cunkuanList", "/infoNotice/updInfoNoticeState.do", "state")
		$('#addAndEditModal').on('hidden.bs.modal', function () {
			if ($("#addAndEditModal").attr("data-type") == "edit") {
				$("#addAndEditModal form")[0].reset()
				$(".pic-noticeText").removeClass("active")
			}
			$("#img-i-loadPic").attr("src", "")
		})	
		$("#table-i-cunkuanList").on("click", ".btn-c-editZongDaiLiInfo", function(event) {
			$("#addAndEditModal").attr("data-type", "edit")
			var $parentTr = $(event.target).closest("tr")
			$("#addAndEditModal .input-auto").each(function(index, element) {
				$(element).val($parentTr.find("." + element.id.split("-")[2] + "-edit-td").text())
			})
			$("#addAndEditModal .w-e-text")[0].innerHTML = $parentTr.find(".noticePicture-edit-td").html()
			$("#addAndEditModal").modal("show")
		})
		
		var obj = {
			btnName: "#button-i-submitZongDaiLi",
			divName: "#addAndEditModal",
			callback: function() {
				$("#input-i-noticeContent").val($("#addAndEditModal .w-e-text").html())
				return "ok"
			},
		}
		
		var ajaxObj = {
			"add":"/infoNotice/addInfoNotice.do",	
			"edit":"/infoNotice/updInfoNotice.do",
		}
		
		checkFormMethod(obj, function() {
			var type = $("#addAndEditModal").attr("data-type")
 			$("#addAndEditModal form").attr("action", ajaxObj[type])
			$("#addAndEditModal form")[0].submit()
		})		
		$("#addAndEditModal").on("shown.bs.modal", function(e) {
			if ($("#addAndEditModal").attr("data-type") === "add") {
				$("#addAndEditModal .w-e-text").html("")
			}
		})
		$("#table-i-cunkuanList").on("click", ".noticeName-edit-td", function(event) {
			var $tr = $(event.currentTarget).closest("tr")
			var html = $tr.find(".noticePicture-edit-td").html()
			showNoticeModal(html)
		})		
	</script>
</body>
</html>